<template>
            <section>
                <router-view></router-view>
                <div class="index-nav">
                    <mt-tabbar v-model="selected">
                    <mt-tab-item id=1>
                        <img slot="icon" src="../../assets/images/ic_tab_home_hl.png">
                        <router-link to="/shouye">首页</router-link>
                    </mt-tab-item>
                    
                    <mt-tab-item id=2>
                        <img slot="icon" src="../../assets/images/ic_tab_class_hl.png">
                    <router-link to="/type">分类</router-link>
                    </mt-tab-item>
                    <mt-tab-item id=3>
                        <img slot="icon" src="../../assets/images/ic_tab_book_hl.png">
                    <router-link to="/book">书架</router-link>
                    </mt-tab-item>
                    <mt-tab-item id=4  class="collect">
                        <img slot="icon" src="../../assets/images/ic_tab_me_hl.png">
                    <router-link to="/my">我的</router-link>
                    </mt-tab-item>
                    </mt-tabbar>
                </div>               
            </section>
</template>


       
<script>
  export default{
    data(){
     downIcon:true;
      return{ 
        selected:'1'
      }
    },
     methods:{
       collect() {
         this.downIcon =!this.downIcon
               }
         }
  }
  </script>
  <style>
  .index-nav{
      position:fixed;
      bottom: 0;
      left: 0;
      right: 0;
      color: gray;
   text-decoration:none;
  }
  .index-nav a{
    text-decoration: none;
    color:#b4b4b4;
    
  }
  .index-nav .mint-tabbar > .mint-tab-item.is-selected a{
    color: #ff7830;
  }
  </style>
  <style scoped>
  
  </style>

  